<template>
  <div class="toast" v-show="isShow">
		<div>{{ message }}</div>
	</div>
</template>

<script>
export default {
	name: 'Toast',
	// props: {
	// 	message: {
	// 		type: String,
	// 		default: ''
	// 	},
	// 	show: {
	// 		type: Boolean,
	// 		default: false
	// 	}
	// },
	data() {
		return {
			message: '',
			isShow: false
		}
	},
	methods: {
		show(message, duration = 2000) {
			this.message = message;
			this.isShow = true;

			setTimeout(() => {
				this.isShow = false;
			}, duration);
		}
	}
}

</script>
<style scoped>
.toast {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.8);
	padding: 8px 10px;
	color: #fff;
	border-radius: 4px;
	z-index: 999;
}
</style>